<{extend name="index/header" /}>
<{block name="body"}>
    <link type="text/css" rel="stylesheet" href="__INDEX__/css/jisistyle.css">
    <section id="page-breadcrumb">
        <div class="vertical-center sun">
             <div class="container">
                <div class="row">
                    <div class="action">
                        <div class="col-sm-12">
                            <h1 class="title">祭祀活动</h1>
                            <p>Sacrificial activities</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <style>
    .fsm h1.modal-content{
        display: none;
    }
    .fsm.full-screen h1.modal-content{
        display: block;
    }
    .jisibg{position: absolute;top: 240px;max-width: 100px;left: 44.5%;border: 3px solid rgba(0, 0, 0, 0.6);}
    .jisinum{color: #32b134;font-size: 2rem}
    .modal-content{background: rgba(255,255,255,0.6)}
    .jisievent{position: absolute;top: 10px;padding: 20px 60px;left: 10%;color: #fff;background: rgba(0,0,0,0.7);border:3px solid #000}
    </style>
    <section id="blog" class="padding-top">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-5">
                    <div class="sidebar blog-sidebar">
                        <div class="sidebar-item popular">
                            <h3>最新祭祀人员</h3>
                            <ul class="gallery">
                                <span id="child"></span>
                                <{if empty($jisiphoto)}>
                                 <div style="text-align: left;padding-left: 10px;" class="zu">暂无人员参加祭祀</div>
                                <{else/}>
                                <{volist name="jisiphoto" id='vo'}>
                                <li><a href="#"><img src="<{$vo.photo}>" alt=""></a></li>
                                <{/volist}>
                                <{/if}>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-9 col-sm-7">
                    <div class="row">
                         <div class="col-md-12 col-sm-12">
                            <div class="single-blog two-column" style="position:relactive">
                                <div class="post-thumb">
                                    <a href="#"><img src="__INDEX__/images/jisi.jpg" class="img-responsive" alt=""></a>
                                </div>
                                <div class="jisibg">
                                    <img src="<{$jisi.jisiphoto}>" width="100%">
                                </div>
                                <div class="jisievent">
                                    <ul style="margin:0;padding:0">
                                        <{volist name="wupin" id="vo"}>
                                        <li>
                                            <{$vo.wupinname}>
                                            <span class="jisinum" id="<{$vo.wupinid}>" jswupinid="<{$vo.sum}>">
                                                <{$vo.sum}>
                                            </span>&nbsp;次
                                        </li>
                                        <{/volist}>
                                    </ul>
                                </div>
                                <div id="fsm_container" class="fsm-container">
                                    <{volist name="wupin" id="vo"}>
                                    <div class="fsm apple">
                                        <i class="fa" onclick="js(this)" wupinid="<{$vo.wupinid}>"><{$vo.wupinname}>
                                        </i>
                                        <h1 class="modal-content">
                                            <img src="__INDEX__<{$vo.wupinphoto}>">
                                        </h1>
                                    </div>
                                    <{/volist}>
                                </div>
                                <div class="post-content overflow">
                                    <h2 class="post-title bold">
                                        <a href="javascript:value(0);"><{$jisi.jisiname}></a>
                                    </h2>
                                    <h3 class="post-author">
                                        <a href="#">发起人：<{$jisi.nickname}></a>
                                    </h3>
                                    <input type="hidden" id="jisiid" value="<{$jisi.jisiid}>">
                                    <p><{$jisi.jisicontent}></p>
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
        </div>
    </section>
    <script type="text/javascript" src="__INDEX__/js/jisiindex.js"></script>
    <script>
        function js(e){
            var wupinid=$(e).attr('wupinid');
            var jisiid=$('#jisiid').val();
            var jisiwupinid=$('#'+wupinid).html();
            $.post("<{:url('jisi/jisiWupin')}>",{'wupinid':wupinid,'jisiid':jisiid},function(data){
                if(data.message=="success"){
                    if(data.data!=undefined){
                        console.log(data.data);
                        $('.gallery').prepend('<li><a href="#"><img src="'+data.data+'" alt=""></a></li>');
                        $('.zu').css('display','none');
                    }
                    $('#'+wupinid).html(parseInt(jisiwupinid)+1);
                }else if(data.message=='log'){
                    alert('请去登陆');
                    window.location.href="/api/register/index";
                    return false;
                }else{
                    alert('请重试');
                }
            },'json');    
        }
    </script>    
<{/block}>
